block snippet backpack by jwunderl · Pull Request #11611 · microsoft/pxt

Joey Wunderlich (jwunderl) · 2026-09-16T01:02:15Z

i reallly, really need to figure out how to make this stop adding so many tests for every little tweak i make....

https://arcade.makecode.com/app/cb07a15575a7e967d3a7c4335496cc5df3db4ad6-98c5cdd261

right click on any block that can hold others, or drag to the backpack icon.

~~seing about implementing another route on backend for storing these individually rather than syncing all as part of account settings like it's currently written to (as that has 64kb cap).~~ implemented but that means new tests on this require staging, so check backend pr for test link.

does some other clean up as part of pr; that bug where the experiments / etc banner messes up css throughout editor is fixed, and copy / paste blocks should have the same checking for extensions / prompt to add if missing

… blocks from custom files

Copilot

Copilot review overview

🟡 Changes recommended

The asset editor can trap users after save failures, and animated previews ignore reduced-motion preferences.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1 · 1

Open (2)

Allow users to exit after a failed asset save · New
Honor reduced-motion preferences for animated previews · New

What changed in this PR

Adds a portable block-snippet Backpack to Project Tools, including dependency-aware insertion, asset editing, previews, search, persistence, and accessibility integration.

Changes:

Adds Backpack capture, validation, storage, search, preview, and project-import workflows.
Integrates isolated native asset editors and Blockly drag/drop.
Adds styling, documentation, typings, and extensive tests.

File	Description
`webapp/src/container.tsx`	Passes tutorial and sign-in handling to Project Tools.
`webapp/src/components/ProjectTools.tsx`	Adds the Backpack tab and interaction state.
`webapp/src/components/pianoRoll/AssetNameModal.tsx`	Uses the contextual asset project.
`webapp/src/components/musicEditor/EditControls.tsx`	Validates names against the contextual project.
`webapp/src/components/ImageFieldEditor.tsx`	Supports isolated asset projects and stores.
`webapp/src/components/ImageEditor/tilemap/TilePalette.tsx`	Creates tiles in the contextual project.
`webapp/src/components/ImageEditor/store/imageReducer.ts`	Resolves assets through an optional project.
`webapp/src/components/ImageEditor/ImageEditor.tsx`	Isolates asset and nested tile editor state.
`webapp/src/components/ImageEditor/ImageCanvas.tsx`	Creates copied tiles in the contextual project.
`webapp/src/components/ImageEditor/BottomBar.tsx`	Uses contextual name validation.
`webapp/src/components/BackpackPreview.tsx`	Lazily renders code and asset previews.
`webapp/src/components/BackpackAssetEditDialog.tsx`	Hosts isolated native asset editing.
`webapp/src/components/AssetEditorContext.ts`	Defines the optional asset-project context.
`webapp/src/blockSnippet.ts`	Validates snippets and resolves dependencies.
`webapp/src/blocks.tsx`	Integrates Backpack capture, import, drag, and clipboard flows.
`webapp/src/backpackStorage.ts`	Exposes Backpack storage adapters.
`webapp/src/backpackSearch.ts`	Implements local fuzzy search.
`webapp/src/backpackProject.ts`	Prepares and inserts Backpack snippets.
`webapp/src/backpackPreview.ts`	Generates bounded block thumbnails.
`webapp/src/backpackAssetPreview.ts`	Generates isolated native asset previews.
`webapp/src/backpackAssetEditor.ts`	Implements scratch-project asset editing.
`webapp/src/assets.ts`	Adds explicit project parameters to asset helpers.
`webapp/src/assetEditor.tsx`	Cleans up iframe messaging and returns success.
`webapp/src/app.tsx`	Registers Backpack asset-editing integration.
`theme/sidedoc.less`	Includes Backpack styles.
`theme/project-tools.less`	Supports a third responsive tool tab.
`theme/project-backpack.less`	Styles Backpack UI and modal states.
`tests/pxt-editor-test/editorrunner.ts`	Consolidates Project Tools tests.
`tests/project-tools-test/whiteboard.spec.js`	Updates whiteboard integration coverage.
`tests/project-tools-test/whiteboard.fixture.js`	Adds Backpack fixture integration.
`tests/project-tools-test/theme-helpers.js`	Removes obsolete theme helpers.
`tests/project-tools-test/storage.spec.js`	Consolidates persistence tests.
`tests/project-tools-test/README.md`	Updates test instructions and ownership.
`tests/project-tools-test/keyboard.spec.js`	Consolidates shortcut-routing coverage.
`tests/project-tools-test/browser.spec.js`	Consolidates browser launch checks.
`tests/project-tools-test/backpack-search.spec.js`	Tests Backpack search behavior.
`tests/project-tools-test/backpack-preview.spec.js`	Tests block preview generation.
`tests/project-tools-test/backpack-editor.spec.js`	Tests editor capture and import integration.
`tests/project-tools-test/backpack-asset-popup.spec.js`	Tests native asset popup behavior.
`tests/project-tools-test/backpack-asset-edit.spec.js`	Tests isolated asset editing and previews.
`pxtservices/iframeDriver.ts`	Restricts pre-handshake iframe messages.
`pxtlib/auth.ts`	Defines Backpack data contracts.
`pxtblocks/index.ts`	Exports Backpack Blockly APIs.
`pxtblocks/fields/field_utils.ts`	Makes serialized tilemaps portable.
`pxtblocks/blockDragger.ts`	Adds Backpack drag-target handling.
`localtypings/pxteditor.d.ts`	Extends asset-editor response typings.
`localtypings/pxtarget.d.ts`	Adds the Backpack target flag.
`docs/project-tools.md`	Documents Backpack usage and behavior.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

Copilot

Copilot review overview

🟡 Changes recommended

Target changes can misfile captures, and failed persistence after insertion can produce duplicate snippets on retry.

Get a fresh assessment by requesting another Copilot review.

Review effort: Balanced
Findings: 1 · 1 · 1

Open (3)

Keep captures bound to their original target · New
Handle persistence failure after insertion · New
Join the dangling release phrase · New

Resolved since last review (2)

Allow users to exit after a failed asset save
Honor reduced-motion preferences for animated previews

+        const headerId = this.parent.state.header.id;
+        const signedIn = auth.loggedIn();
+        const userId = auth.userProfile()?.id;
+        const isCurrentAccount = (): boolean => auth.loggedIn() === signedIn
+            && (!signedIn || auth.userProfile()?.id === userId);


+    pxtblockly.pasteBackpackBlock(saved.code, workspace, coordinates, saved.kind); // Owns the single undo group and asset remapping.
+    await wait(() => Blockly.renderManagement.finishQueuedRenders());
+    await wait(host.saveAsync);


+or failure-stage matrices. Use [browser.js](browser.js), await actual effects and
+transactions, and unmount before closing pages. Network/account boundaries are
+mocked; check cross-device sync, keyboard/touch and screen readers manually.
+before release. See [feature usage](../../docs/project-tools.md).


Joey Wunderlich (jwunderl) · 2026-09-18T20:47:04Z

+}
+
+/** Parse untrusted storage before calling any Blockly loaders or field/mutation hooks. */
+export function parseBackpackCode(code: string): BackpackCode {


this feels a bit overcomplicating it, though reading it does seem to cover good cases. commenting to revisit / see how can narrow it down to be more like, feeling like something we'd actually write

Joey Wunderlich (jwunderl) · 2026-09-18T21:26:27Z

okay, tons of tests but if you just... ignore those... seems like reasonable spot to me so far. target branch is #11609 (that's also where bulk of the lines removed are from since i did the test clean up all at once in here), but that's mainly just if you want extra context on the project tools portion

Joey Wunderlich (jwunderl) added 2 commits September 15, 2026 16:43

backpack bubble implementation

8151f6c

make copy / paste act same as backup, so suggest adding ext / warn on…

95c3f10

… blocks from custom files

Joey Wunderlich (jwunderl) added this pull request to stack #11612 September 16, 2026 01:02

Joey Wunderlich (jwunderl) added 17 commits September 15, 2026 18:07

only list missing extensions

cb65b06

allow naming the snippets

c08e2b9

cleaning up naming & also fixing hover behavior on bubbles

1deccd8

fix button design

58653d1

add fuse search for backpack

da20aad

handle invalid snippets better

7c8927a

better looking pngs

9ce616c

move to backpack endpoints

d12d757

cull bad tests

c579bb0

better error on too big

1732089

assets in backpack v1

c0608be

fix backend not deleting

e98b56d

no iframe for embed

7ab67f2

fix race for synced accounts

9783c99

allow assets tab in tutorials while still disabling code snippet

4c4e51e

few nitpicks on styling

e744912

caching behavior

e226908

Joey Wunderlich (jwunderl) requested a balanced review from Copilot September 17, 2026 19:04

Copilot started reviewing on behalf of Joey Wunderlich (jwunderl) September 17, 2026 19:05 View session

Copilot AI reviewed Sep 17, 2026

View reviewed changes

Comment thread webapp/src/components/BackpackAssetEditDialog.tsx Outdated

Comment thread webapp/src/components/BackpackPreview.tsx

Joey Wunderlich (jwunderl) commented Sep 17, 2026

View reviewed changes

Comment thread pxtlib/auth.ts Outdated

Comment thread pxtlib/auth.ts Outdated

Joey Wunderlich (jwunderl) and others added 4 commits September 17, 2026 12:16

Apply batched suggestions from code review

5b2a9ae

Co-authored-by: Joey Wunderlich <jwunderl@users.noreply.github.com>

culling tests

2493a80

filter on field editor not block id

86557c0

addressing few comments

7d07cb6

Joey Wunderlich (jwunderl) requested a balanced review from Copilot September 17, 2026 21:33

Copilot started reviewing on behalf of Joey Wunderlich (jwunderl) September 17, 2026 21:34 View session

Copilot AI reviewed Sep 17, 2026

View reviewed changes

Joey Wunderlich (jwunderl) added 2 commits September 17, 2026 14:56

more fixing

96007a1

add flags for tools, guard identity / asset needs

42a2684

Joey Wunderlich (jwunderl) mentioned this pull request Sep 18, 2026

flags for backpack / whiteboard microsoft/pxt-arcade#7752

Open

Joey Wunderlich (jwunderl) marked this pull request as ready for review September 18, 2026 20:55

Joey Wunderlich (jwunderl) commented Sep 18, 2026

View reviewed changes

Navigation Menu

block snippet backpack - #11611

block snippet backpack#11611
Joey Wunderlich (jwunderl) wants to merge 25 commits into
dev/jwunderl/bubbles-and-whiteboardfrom
dev/jwunderl/backpack

Joey Wunderlich (jwunderl) commented Sep 16, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Joey Wunderlich (jwunderl) Sep 18, 2026

Uh oh!

Joey Wunderlich (jwunderl) commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Joey Wunderlich (jwunderl) commented Sep 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Joey Wunderlich (jwunderl) Sep 18, 2026

Choose a reason for hiding this comment

Uh oh!

Joey Wunderlich (jwunderl) commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Joey Wunderlich (jwunderl) commented Sep 16, 2026 •

edited

Loading